<template>
	<view class="content">
		<view class="head">
			<view class="pictures">
				<view class="picture" >
						<u-avatar style="width: 99px; height: 99px;" :src="src"></u-avatar>
					</view>
					<view style="font-weight:600;color:#000;font-size:36rpx">{{userData.account}}</view>
			</view>
		</view>
		<view class="">
		<view class="box">
       <view class="infoBox">
					<view class="title">
						<view class="img" style=""><img src="../scheduling/taskManage/image/icon_zhanghao.png" alt=""></view>
						<view>账号</view>
						</view>
					<view class="titleInfo">{{userData.name}}</view>
				</view>
				<view class="infoBox">
					<view class="title">
						<view class="img" style=""><img src="../scheduling/taskManage/image/icon_bumen.png" alt=""></view>
						<view>部门</view>
						
						</view>
					<view class="titleInfo">{{userData.deptName}}</view>
				</view>
				<view class="infoBox">
					<view class="title">
						<view class="img" style=""><img src="../scheduling/taskManage/image/icon_shuoji.png" alt=""></view>
						<view>手机号</view>
					</view>
					<view class="titleInfo">{{userData.phone}}</view>
				</view>
			</view>
		
		<!-- <view class="material layout">
			<view class="img2"></view>
			<view class="material" style="padding-left: 80rpx;">退出登录</view>
			<view class="passTo"></view>
		</view> -->
		</view>
		
		<!-- 底部导航 -->
		<u-tabbar :list="tabbarList" height="40px"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: require('../scheduling/taskManage/image/touxiang.png'),
				text:'Admin',
				userData:{
          account:'admin',
          deptName:"",
          name:"",
          phone:""
        }
			}
		},
		computed: {
			tabbarList (){
				return this.$store.state.common.tabbarList
			}
		},
    created(){
      this.$api.reqApi.getUserInfo().then(res=>{
        if(res.code=='200'){
          this.userData = res.data[0]
        }
      })
    },
		methods: {
			goUserPage(){
				uni.navigateTo({url: '/pages/myInfo/info'})
			}
		}
	}
</script>

<style lang="scss">
	body,html{
		width: 100%;
		height: 100%;
		background-color: #f0f2f4;
	}
	.content{
		position: relative;
		border-radius: 20rpx;
		.box{
			background-color: #fff;
			border-radius: 20rpx;
			width: 80%;
			position: absolute;
			top: 180rpx;
			left: 50%;
			transform: translateX(-50%);
			height: 600rpx;
			padding:  0 40rpx 0 40rpx ;
			padding-top: 250rpx;
			.infoBox{
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f2f2f2;
      padding: 30rpx 40rpx 30rpx 40rpx;
      .title{
        font-size: 32rpx;
        color: #3c3c3c;
				align-items: center;
				display: flex;
				.img{
					width: 48rpx;
					height: 48rpx;
					margin-right: 10rpx;
					img{
						width: 100%;
					}
				}
      }
      .titleInfo{
        color: #464646;
        font-size: 30rpx;
      }
    }
		}
	}
.head{
	width: 100%;
	height: 200px;
	background: url(../scheduling/taskManage/image/banner_bg.png);
	background-size:  100% 100%;
	color: #FFFFFF;
	display: flex;
	justify-content:space-around;
	align-items: center;
	text-align: center;
	margin-bottom: 27px;
	// position: absolute;
	//     top: 0;
	.pictures{
			position: absolute;
		top: 80rpx;
		left: 50%;
			transform: translateX(-50%);
		z-index: 10;
	}
	.picture{
		width: 99px;
		height: 100px;
		margin-bottom: 10px;
		
	}
}
.material{
	line-height: 50px;
	width: 90%;
	height: 50px;
	// background-color: #ffffff;
	    margin: 0 auto 50rpx;
	// margin-bottom: 25px;
	// padding-right: 35px;
	border-bottom: 1px solid #dde0e4;
}
.layout{
	justify-content:space-between;
	display: flex;
	position: relative;
	.passTo {
		position: absolute;
		background: url(../scheduling/taskManage/image/icon_right.png);
		background-size:  100% 100%;
		width: 28rpx;
		height: 28rpx;
		    top: 18px;
		    right: 0;
	}
	.img1 {
		width: 56rpx;
		height: 56rpx;
		background: url(../scheduling/taskManage/image/icon_geren.png);
		background-size:  100% 100%;
		position: absolute;
		top: 11px;
		left: 0;
	}
	.img2 {
		width: 56rpx;
		height: 56rpx;
		background: url(../scheduling/taskManage/image/icon_out.png);
		background-size:  100% 100%;
		position: absolute;
		top: 11px;
		left: 0;
	}
}
</style>
